<template>
    <div class="productType-form">
        <el-form ref="form" :model="productType" label-width="120px">

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>产品类型</template>
                        <el-input v-model="productType.productType" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="productType.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="productType.remarks" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>


        <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
        </div>


    </div>
</template>

<script>
    import productTypeApi from '@/api/productType/productTypeApi'
    export default {
        name: "ProductTypeForm",
        data() {
            return {
                productType: {
                    id: '',
                    productType: '',
                    sort: '',
                    remarks:'',
                },
            }
        },
        methods: {
            editDataBoxClose() {
                this.$emit('editDataBoxClose', false)
            },
            async onEditSubData() {
                let res = '';
                if (this.productType.id != '') {
                    res = await productTypeApi.updateProductType(this.productType)
                    if (res.code == '200') {
                        this.$emit('onUpdateSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                } else {
                    res = await productTypeApi.saveProductType(this.productType)
                    if (res.code == '200') {
                        this.$emit('onAddSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                }

            },
            clearDate() {
                let productType = {
                    productType: '',
                    sort: '',
                    remarks:'',
                }
                this.productType = productType
            },
        },
        props: {
            editItemData: {
                require: true
            }
        },
        watch: {
            editItemData: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal != '') {
                        this.productType = newVal
                    }
                }
            }
        },
    }
</script>

<style scoped>
    .officeIntroduce-detail{
        height: 600px;
        margin-bottom: 30px;
    }
</style>